<template>
  <div>
    <!-- 顶部导航栏 -->
    <van-nav-bar
      class="top-bg"
      title="账号登录"
      left-arrow
      right-text="注册"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    ></van-nav-bar>
    <!-- <h1>账户密码登录</h1> -->
    <van-cell-group>
      <van-field v-model="username" left-icon="manager-o" placeholder="邮箱/手机号" />
      <van-field v-model="password" type="password" left-icon="closed-eye" placeholder="密码" />
    </van-cell-group>
    <!-- 按钮 -->
    <div style="margin: 16px;">
      <van-button block type="info" native-type="submit" @click="home()">登录</van-button>
    </div>
    <div class="tips">
      <div>
        <span class="span1">快捷登录</span>
      </div>
      <div>
        <span class="span2">忘记密码?</span>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    // 点击登录.后台获取数据验证登录
    home() {
      axios
        .post('/api/login',{},{
          params:{
            username: this.username,
          password: this.password
          }
        })
        .then(res => {
          console.log(res);
          if (res.status=== 200) {
            this.$router.push({
              name: '首页'
            });
          } else {
            alert('用户或密码错误');
          }
        });
    },
    onClickLeft() {
      this.$router.push({
        name: 'Login'
      });
    },
    onClickRight() {
      this.$router.push({
        name: 'Regsiter'
      });
    }
  }
};
</script>
<style scoped>
.tips {
  display: flex;
  justify-content: space-between;
}
.span1,
.span2 {
  font-size: 1.3rem;
}
.span1 {
  margin: 0.6rem;
}
.span2 {
  color: rgb(0, 152, 253);
  margin: 0.6rem;
}
</style>